"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

import TimerMixin from "react-timer-mixin";
import IScroll from "./iscroll.jsx";

import { CONFIG } from "../common/config.js";
import { GOTOMixin, HighChartMixin } from "./mixins.jsx";
import { TradingActions } from "../action/tradingaction.js";
import { TradingStore } from "../store/tradingstore.js";
import { curDate, getISODate, getISODatetime, getDateStartEndByType } from "../common/datehelper.js";
import { doughNut2DConfig, pie2DConfig, area2DConfig, getColors } from "../common/chartconfig.js";
import { numFixed, unitFormat } from "../common/numberformat.js";
import { sliceNoNull, upOrDown, loadingCheckChart1 } from "./common.jsx";
import { getLastTradingDay } from "../store/common.js";


var zbCal = function(dataArray, params){
	// 占比计算
	// sign 传入一个标记， 用于特殊数据处理
	// className: 指定 css 类名
	// colors: 指定 label 颜色
	// dataArray 示例：
	// [{"label": "两融成交量", "value": 460000000000, "vdate": 1430150400000 },
    //  {"label": "传统成交量", "value": 500000000000, "vdate": 1430150400000 },
 	//  {"label": "两融成交量", "value": 460000000000, "vdate": 1430160400000 },
	//  {"label": "传统成交量", "value": 500000000000, "vdate": 1430160400000 }, ]
	// noRatio 无占比配置，一个包含了取消占比的 key array	
	// type label的显示类别，1: 单行, 2: 换行

	params = (params == null? {}: params);
	var sign = params['sign'];
	var className = params['className'];
	var colors = params['colors'];
	var decimal = params['decimal'];
	decimal = (decimal == null? 0: decimal);
	var unit = params['unit'];
	var unitBu = params['unitBu']; // 业务单位
	unitBu = (unitBu == null ? '元': unitBu)
	var type = params['type'];
	type = (type == null? 1: type);
	var noRatio = params['noRatio'];
	noRatio = ((noRatio == null)?[] : noRatio);
	var sum = params['sum'];
	sum = ((sum == null) ? [] : sum);

	if (dataArray == null || dataArray.length == 0){
		// 返回一个空结构
		if (type == 1) {
			return (
			<div className={className==null? "info": className}>
				<div className="first">
					<span className="title">:</span>
					<span className="value">{unitBu}，
					占比%
					</span>
				</div>
				<div className="first">
					<span className="title">:</span>
					<span className="value">{unitBu}，
					占比%
					</span>
				</div>
			</div>
			)
		} else if (type == 2) {
			return (
				<div className={className==null? "info": className}>
					<div className="first">
						<div className="title"></div>
						<div className="value">{unitBu}，占比%</div>
					</div>
					<div className="first">
						<div className="title"></div>
						<div className="value">{unitBu}，占比%</div>
					</div>
				</div>
			)
		}
	}

	// 合并计算
	var labels = [];// ['两融成交量', '传统成交量']
	var labelValues = {}; // {'两融成交量': [{ "value": 460000000000, "vdate": 1430150400000}, {"value": 460000000000, "vdate": 1430160400000}], 
						  //  "传统成交量": [{"value": 500000000000, "vdate": 1430150400000}, {"value": 500000000000, "vdate": 1430160400000}]}
	for(var i=0; i<dataArray.length; i++){
		var item = dataArray[i];
		if(labels.indexOf(item.label) < 0){
			labels.push(item.label);
			labelValues[item.label] = [];
		}
		labelValues[item.label].push(
			{vdate:item.yyyymmdd, value:item.value}
		)
	}

	// 数据预处理
	prepare(labels, labelValues, sign);

	// 生成 dom 节点
	var total = 0;
	var all = false;

	for(var i=0; i<labels.length; i++){
		var label = labels[i];
		// 默认第一个对象是最新的数据
		var value = sliceNoNull(labelValues[label], 0).value;
		labels[i] = [label, value];
		if (!all) {
			if (sum.indexOf(label) >= 0) {
				total = value;
				all = true;
			} else {
				total = total + value;
			}
		}
	}

	var infoList = [];
	for(var i=0; i<labels.length; i++){
		var label = labels[i][0];
		var value = labels[i][1];
		var unitValue = unitFormat(value, unit);
		if (type == 1) {
			var ratio = '，占比' + numFixed((total==0||total==null || value==null)? null : (value*100/total), 2) + '%';
			if(noRatio.indexOf(label) >= 0){
				ratio = '';
			}
			infoList.push(
			<div key={label} className="first">
				<span className="title" style={{color: colors==null?'':colors[i]}}>{label+'：'}</span>
				<span className="value">{numFixed(unitValue[0],0)}{unitValue[1]}{unitBu}{ratio}
				</span>
			</div>
			)
		} else if (type == 2) {
			var ratio = '，占比' + numFixed((total==0||total==null || value==null)? null : (value*100/total), 2) + '%';
			if(noRatio.indexOf(label) >= 0){
				ratio = '';
			}
			infoList.push(
				<div key={label} className="first">
					<div className="title" style={{color: colors==null?'':colors[i]}}>{label}</div>
					<div className="value">{numFixed(unitValue[0],0)}{unitValue[1]}{unitBu}{ratio}</div>
				</div>
			)
		}
	}

	return (
		<div className={className==null? "info": className}>
			{infoList}
		</div>
	)
}

var prepare = function(labels, labelValues, sign){
	if(sign == 'AUM'){
		_.remove(labels, function(n){
			return n == '总资产'
		})
	}
}
var preparePieChart = function(values, sign){
	if(sign == 'AUM'){
		_.remove(values, function(item){
			return item.label == '总资产';
		})
	}
}

var loadingCheckChart = function(status, key, iframe){
	// 检查图形的数据是否loading完成
	if(status == null){
		return iframe;
	}
	if(status[key] == 'FETCHING'){
		return <i className="icon-spinner icon-spin"></i>;
	}
	return iframe;	
}

var loadingCheckData = function(status, key, ds_data_t1) {
	if (status == null) {
		return ds_data_t1;
	}
	if (status[key] == 'FETCHING') {
		return {};
	}
	return ds_data_t1;
}

var PageTrading = React.createClass({
	mixins: [History, GOTOMixin, Reflux.connect(TradingStore, "data"), TimerMixin, HighChartMixin ], 
	getInitialState: function(){
		return {
			displayBlock: 'AUM', // 初始显示 AUM
			dimdate: 'DAY', // DAY/MONTH
			type: 0,		// 1、左侧点击，2、dimdate变化
			disableChart: true, // 禁止渲染图形
		};
	},
	pullDownCallback: function(){
		this.setState({pullDownMargin: "52px"});
		TradingActions.fetchData();
		setTimeout(function(){
			this.setState({pullDownMargin: null});
		}.bind(this), 3000);
	},
	fetchLastDayData: function(apiCollections){
		var callback = function(lastTradingDay){
			var d = new Date(lastTradingDay.getFullYear(), lastTradingDay.getMonth(), lastTradingDay.getDate());
 			d.setDate(d.getDate() - 15);
 			TradingActions.fetchData({
				dimdate: 'DAY',
				ds_trade_t1_hb_comparetype: 'DOD',
				startdate: getISODate(lastTradingDay).replace(/\-/g, ''),
				enddate: getISODate(lastTradingDay).replace(/\-/g, ''),
				ds_comr_volumes_startdate: getISODate(d).replace(/\-/g, ''),
				ds_portion_volumes_startdate: getISODate(d).replace(/\-/g, ''),
				apiCollections: apiCollections
			});
			this.setState({enddate: getISODate(lastTradingDay)});
		}.bind(this)
		var today = new Date();
		getLastTradingDay(new Date(today.getFullYear(), today.getMonth(), today.getDate()), callback)
	},
	getApiCollection: function(displayBlock) {
		switch(displayBlock) {
			case 'AUM': return ['aum'];
			case 'CJL': return ['trade'];
			case 'YJSR': return ['comi'];
			case 'YJFL': return ['comr'];
			case 'SCFE': return ['portion'];
			case 'BZJS': return ['cash'];
			case 'JYKHS': return ['tradecust'];
			case 'LRZJC': return ['twof'];
			case 'YDGH': return ['repurchase'];
			case 'GPZY': return ['pledge'];
			case 'RZPSJ': return ['board'];
			case 'CCSZ': return ['position'];
			default: return ['aum'];
		}
	},
	componentDidMount: function(){
		var parent = ReactDOM.findDOMNode(this);
		var parent = $(parent).parent();
		var className = parent.attr('class');
		if(className != 'page_bargain'){
			parent.attr('class', 'page_bargain');
		}
		var displayBlock = '';

		if(this.state.data && this.state.data.state && this.state.data.state.displayBlock){
			this.setState({displayBlock: this.state.data.state.displayBlock});
			displayBlock = this.state.data.state.displayBlock;
		}
		
		this.fetchLastDayData(this.getApiCollection(displayBlock));
		TradingActions.t0Fetch();
		this.setInterval(TradingActions.t0Fetch, 1000*10);

		// 500ms 后启用图形渲染
		setTimeout(function(){this.setState({disableChart: false})}.bind(this), 500);
	},
	goBackIndex: function(){
		// 禁用图形渲染
		this.setState({disableChart: true});
		this.gotoIndex();
	},
  	formatData: function(sdata) {
  		// 计算市场份额
    	if (sdata == null || sdata.length == 0) return [{}];

    	var data = [];
    	var date = {}

    	for (var i = 0; i < sdata.length; i++) {
    		var item = sdata[i];
    		if (!date.hasOwnProperty(item.ex_date)) {
    			date[item.ex_date] = [];
    		}
    		date[item.ex_date].push(
    			{label: item.label, value: item.value}
    		)
    	}
    	for (var d in date) {
    		data.push({ex_date: d, data:date[d]});
    	}
    	data.sort(function(val1, val2) {
    		return val1.ex_date - val2.ex_date;
    	});
    	return data;
    },
    updateData: function(resolve, reject) {
    	var callback = function() {
    		resolve();
    	}
		TradingActions.t0Fetch(callback);
    },
	handleRowTap: function(event){
		var tr = $(event.target).parents('tr');
		var target = tr.attr('data-target');
		var dimdate = this.state.dimdate;
		if(target == this.state.displayBlock){
			return;
		}
		this.setState({displayBlock: target, type: 1});
		if (dimdate == 'DAY') {
			this.fetchLastDayData(this.getApiCollection(target));
		} else {
			if (target == 'YJFL') {
				TradingActions.fetchData({
				'dimdate': dimdate,
				'ds_comr_volumes_startdate': this.state.ds_comr_volumes_startdate,
				'enddate': this.state.enddate,
				'apiCollections': this.getApiCollection(target)
				})
			} else if (target == 'SCFE') {
				TradingActions.fetchData({
				'dimdate': dimdate,
				'ds_portion_volumes_startdate': this.state.ds_portion_volumes_startdate,
				'enddate': this.state.enddate,
				'apiCollections': this.getApiCollection(target)
				})
			} else {
				TradingActions.fetchData({
				'dimdate': dimdate,
				'startdate': this.state.enddate,
				'enddate': this.state.enddate,
				'apiCollections': this.getApiCollection(target)
				})
			}	
		}
		TradingActions.saveState({displayBlock: target});
	},
	handleDateTypeChoose: function(event){
		var dimdate = $(event.target).attr('data-target');

		var displayBlock = this.state.displayBlock;
		var apiCollections = this.getApiCollection(displayBlock);
		var params = {dimdate: dimdate};
		this.setState({type: 2});
		if (dimdate == 'DAY') {
			this.setState({dimdate: dimdate});
			params['startdate'] = curDate().replace(/\-/g, '');
			params['enddate'] = curDate().replace(/\-/g, '');
			params['ds_trade_t1_hb_comparetype'] = 'DOD';
			this.fetchLastDayData(apiCollections);
			return
		}  else if (dimdate == 'MONTH') {
			params['ds_trade_t1_hb_comparetype'] = 'MOM';
		} else if (dimdate == 'WEEK') {
			params['ds_trade_t1_hb_comparetype'] = 'WOW';
		} else if (dimdate == 'QUARTER') {
			params['ds_trade_t1_hb_comparetype'] = 'QOQ';
		} else if (dimdate == 'YEAR') {
			params['ds_trade_t1_hb_comparetype'] = 'YOY';
		}
		var comr_date = getDateStartEndByType(new Date(), dimdate, 15);
		params['ds_comr_volumes_startdate'] = getISODate(comr_date.startdate);
		var portion_date = getDateStartEndByType(new Date(), dimdate, 15);
		params['ds_portion_volumes_startdate'] = getISODate(portion_date.startdate);

		if (displayBlock == 'YJFL') {		
			params['enddate'] = getISODate(comr_date.enddate);
			TradingActions.fetchData({
				'dimdate': dimdate,
				'enddate': params['enddate'].replace('/\-/g', ''),
				'ds_trade_t1_hb_comparetype': params['ds_trade_t1_hb_comparetype'],
				'ds_comr_volumes_startdate': params['ds_comr_volumes_startdate'].replace('/\-/g', ''),
				'apiCollections': apiCollections
			}); 
		} else if (displayBlock == 'SCFE') {
			params['enddate'] = getISODate(portion_date.enddate);
			TradingActions.fetchData({
				'dimdate': dimdate,
				'enddate': params['enddate'].replace('/\-/g', ''),
				'ds_trade_t1_hb_comparetype': params['ds_trade_t1_hb_comparetype'],
				'ds_portion_volumes_startdate': params['ds_portion_volumes_startdate'].replace('/\-/g', ''),
				'apiCollections': apiCollections
			}); 
		} else {
			var date = getDateStartEndByType(new Date(), dimdate);
			params['startdate'] = getISODate(date.startdate);
			params['enddate'] = getISODate(date.enddate);
			TradingActions.fetchData({
				'dimdate': dimdate,
				'startdate': params['startdate'].replace('/\-/g', ''),
				'enddate': params['enddate'].replace('/\-/g', ''),
				'ds_trade_t1_hb_comparetype': params['ds_trade_t1_hb_comparetype'],
				'apiCollections': apiCollections
			});
		}
		this.setState({dimdate: dimdate, ds_comr_volumes_startdate: params['ds_comr_volumes_startdate'], ds_portion_volumes_startdate: params['ds_portion_volumes_startdate']});
	},
	getPieChartConfig: function(values, color){
		// values: [{label:xxx, value:xxx}, {label:xxx, value:xxx}]
		var config = $.extend(true, {}, pie2DConfig);

		config.renderAt = 'chart';
		if(values == null || values.length == 0)
			return config;
		var data = values;
		config['dataSource']['data'] = data;
		config.height = 100;
		if(color == null){
			color = '#ffffff';
		}

		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.pieRadius = "30";

		return config;
	},
	getAreaChartConfig: function(values, color){
		var config = $.extend(true, {}, area2DConfig);
		config.renderAt = 'chart';
		config.height = 180;
		if(values == null || values.length == 0)
			return config;
		var data = values;		
		config['dataSource']['data'] = data;
		if(color == null){
			color = '#ffffff';
		}
		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.labelStep = values.length -1;

		return config;
	},
	render: function(){
		var status = _.get(this.state.data, 'status', {});

		var ds_trade_t0 = _.get(this.state.data, 'ds_trade_t0', {});
		var ds_trade_t1 = _.get(this.state.data, 'ds_trade_t1_tb', {value: [{}]}).value[0];
		var ds_trade_t1_tb = _.get(this.state.data, 'ds_trade_t1_tb', {chaindata: [{}]}).chaindata[0];
		var ds_trade_t1_hb = _.get(this.state.data, 'ds_trade_t1_hb', {chaindata: [{}]}).chaindata[0];
		var ds_trade_t1_hb_cvalue = _.get(this.state.data, 'ds_trade_t1_hb', {comparevalue: [{}]}).comparevalue[0];

		if (this.state.type == 2) {
			ds_trade_t1 = loadingCheckData(status, 'ds_trade_t1_tb', ds_trade_t1);
			ds_trade_t1_tb = loadingCheckData(status, 'ds_trade_t1_tb', ds_trade_t1_tb);
			ds_trade_t1_hb = loadingCheckData(status, 'ds_trade_t1_hb', ds_trade_t1_hb);
			ds_trade_t1_hb_cvalue = loadingCheckData(status, 'ds_trade_t1_hb', ds_trade_t1_hb_cvalue);		
		}

		var ds_aum_volumes = _.get(this.state.data, 'ds_aum_volumes', {value: []}).value;
		var ds_trade_volumes = _.get(this.state.data, 'ds_trade_volumes', {value: []}).value;
		var ds_comi_volumes = _.get(this.state.data, 'ds_comi_volumes', {value: []}).value;
		var ds_portion_volumes = _.get(this.state.data, 'ds_portion_volumes', {value: []}).value;
		var ds_cash_volumes = _.get(this.state.data, 'ds_cash_volumes', {value: []}).value;
		var ds_tradecust_volumes = _.get(this.state.data, 'ds_tradecust_volumes', {value: []}).value;
		var ds_twof_volumes = _.get(this.state.data, 'ds_twof_volumes', {value: []}).value;
		var ds_position_volumes = _.get(this.state.data, 'ds_position_volumes', {value: []}).value;
		var ds_repurchase_volumes = _.get(this.state.data, 'ds_repurchase_volumes', {value: []}).value;
		var ds_pledge_volumes = _.get(this.state.data, 'ds_pledge_volumes', {value: []}).value;
		var ds_board_volumes = _.get(this.state.data, 'ds_board_volumes', {value: [{}]}).value;
		var ds_comr_volumes = _.get(this.state.data, 'ds_comr_volumes', {value: []}).value;

		var colors = getColors();

		// AUM 
		var aum_total_amt_t0 = unitFormat(_.get(ds_trade_t0, 'aum_total_amt', null));
		aum_total_amt_t0[0] = aum_total_amt_t0[0] == null ? '--' : aum_total_amt_t0[0];
		var aum_total_amt_t1 = unitFormat(_.get(ds_trade_t1, 'aum_total_amt', null));
		var aum_hb_t1 = _.get(ds_trade_t1_hb, 'aum_total_amt', null);
		aum_hb_t1 = numFixed(aum_hb_t1==null? '': aum_hb_t1*100, 2);
		var aum_tb_t1 = _.get(ds_trade_t1_tb, 'aum_total_amt', null);
		aum_tb_t1 = numFixed(aum_tb_t1==null? '': aum_tb_t1*100, 2);

		var loadingAUM = null, summaryAUM = null, chartAUM = null;
		if(this.state.displayBlock == 'AUM'){
			preparePieChart(ds_aum_volumes, 'AUM');
			// var configAUM = this.getPieChartConfig(ds_aum_volumes, "#FDF5E8");
			var configAUM = this.getHPie2DConfig(ds_aum_volumes, {
				height: (screen.width-64)*0.45 - 10,
				backgroundColor: '#FDF5E8'
			});
			if(!this.state.disableChart){
				chartAUM = this.getHighChart(configAUM);
			}
			var loadingAUM = loadingCheckChart1(status, 'ds_aum_volumes');
			// this.addChart('chart-aum', configAUM);
		
			// var jsonConfigAUM = encodeURIComponent(JSON.stringify(configAUM));
			// chartAUM = (<iframe src={"./chart.html?data="+jsonConfigAUM} height={parseInt(configAUM.height) + 4} width="100%" style={{border:"none", backgroundColor: configAUM.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartAUM = loadingCheckChart(status, 'ds_aum_volumes', chartAUM);
			summaryAUM = zbCal(ds_aum_volumes, {sign:'AUM', colors: colors, type:1});
		}
		
		var blockAUM = (
			<tr className={"aum " + (aum_hb_t1 > 0 ?'up' : 'down')} data-target="AUM" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>AUM数据</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'aum' + aum_total_amt_t0[0]} className={"value"}>{numFixed(aum_total_amt_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{aum_total_amt_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span>
								<span className="value">{numFixed(aum_total_amt_t1[0],0)}</span>
								<small>{aum_total_amt_t1[1]}元</small>
							</p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(aum_hb_t1)}>{aum_hb_t1}%</span></p>
							<p className="tb">同比:<span className={upOrDown(aum_tb_t1)}>{aum_tb_t1}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='AUM'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingAUM==null?'block': 'none')}} id="chart-aum">
								{chartAUM}
								</span>
								{loadingAUM}
							</div>
							{summaryAUM}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingAUM}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.aum_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)

		// 成交量
		var trade_volume_t0 = unitFormat(_.get(ds_trade_t0, 'trade_volume', null));
		trade_volume_t0[0] = trade_volume_t0[0] == null ? '--' : trade_volume_t0[0];
		var trade_volume_t1 = unitFormat(_.get(ds_trade_t1, 'trade_volume', null));
		var trade_volume_hb = _.get(ds_trade_t1_hb, 'trade_volume', null);
		trade_volume_hb = numFixed(trade_volume_hb==null?'' : trade_volume_hb*100, 2);
		var trade_volume_tb = _.get(ds_trade_t1_tb, 'trade_volume', null);
		trade_volume_tb = numFixed((trade_volume_tb==null?'' : trade_volume_tb*100), 2);

		var loadingCJL = null, summaryCJL = null, chartCJL = null;
		if(this.state.displayBlock == 'CJL'){
			// var configCJL = this.getPieChartConfig(ds_trade_volumes);
			var configCJL = this.getHPie2DConfig(ds_trade_volumes, {
				height: (screen.width-64)*0.45 - 10,
			});
			if(!this.state.disableChart){
				chartCJL = this.getHighChart(configCJL);
			}
			var loadingCJL = loadingCheckChart1(status, 'ds_trade_volumes');
			// this.addChart('chart-cjl', configCJL);;
		
			// var jsonConfigCJL = encodeURIComponent(JSON.stringify(configCJL));
			// chartCJL = (<iframe src={"./chart.html?data="+jsonConfigCJL} height={parseInt(configCJL.height) + 4} width="100%" style={{border:"none", backgroundColor: configCJL.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartCJL = loadingCheckChart(status, 'ds_trade_volumes', chartCJL);
			summaryCJL = zbCal(ds_trade_volumes, {sign: 'CJL', colors: colors, type: 2});
		}

		var blockCJL = (
			<tr className={"cjl " + (trade_volume_hb>0? 'up' : 'down')}  data-target="CJL" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>成交量</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'cjl' + trade_volume_t0[0]} className={"value"}>{numFixed(trade_volume_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{trade_volume_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span>
								<span className="value">{numFixed(trade_volume_t1[0],0)}</span>
								<small>{trade_volume_t1[1]}元</small>
							</p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(trade_volume_hb)}>{trade_volume_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(trade_volume_tb)}>{trade_volume_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='CJL'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display:(loadingCJL==null?'block': 'none')}} id="chart-cjl">
								{chartCJL}
								</span>
								{loadingCJL}
							</div>
							{summaryCJL}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingVolume}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.trade_volume_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>	
		)

		// 佣金收入
		var commission_income_t0 = unitFormat(_.get(ds_trade_t0, 'commission_income', null), '万');
		commission_income_t0[0] = commission_income_t0[0] == null ? '--' : commission_income_t0[0];
		var commission_income_t1 = unitFormat(_.get(ds_trade_t1, 'commission_income', null), '万');
		var commission_income_hb = _.get(ds_trade_t1_hb, 'commission_income', null);
		commission_income_hb = numFixed(commission_income_hb==null?'': commission_income_hb*100, 2);
		var commission_income_tb = _.get(ds_trade_t1_tb, 'commission_income', null);
		commission_income_tb = numFixed(commission_income_tb==null?'': commission_income_tb*100, 2);

		var loadingYJSR = null, summaryYJSR = null, chartYJSR=null;
		if(this.state.displayBlock == 'YJSR'){
			// var configYJSR = this.getPieChartConfig(ds_comi_volumes, "#FDF5E8");
			var configYJSR = this.getHPie2DConfig(ds_comi_volumes, {
				height: (screen.width-64)*0.45 - 10,
				backgroundColor: '#FDF5E8'
			});
			if(!this.state.disableChart){
				chartYJSR = this.getHighChart(configYJSR);
			}

			var loadingYJSR = loadingCheckChart1(status, 'ds_comi_volumes');
			// this.addChart('chart-yjsr', configYJSR);

			// var jsonConfigYJSR = encodeURIComponent(JSON.stringify(configYJSR));
			// chartYJSR = (<iframe src={"./chart.html?data="+jsonConfigYJSR} height={parseInt(configYJSR.height) + 4} width="100%" style={{border:"none", backgroundColor: configYJSR.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartYJSR = loadingCheckChart(status, 'ds_comi_volumes', chartYJSR);
			summaryYJSR = zbCal(ds_comi_volumes, {colors: colors, type: 2});
		}
				
		var blockYJSR = (
			<tr className={"yjsr " + (commission_income_hb>0? 'up' : 'down')}  data-target="YJSR" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>佣金收入</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'yjsr' + commission_income_t0[0]} className={"value"}>{numFixed(commission_income_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{commission_income_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(commission_income_t1[0],0)}</span>
							<small>{commission_income_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(commission_income_hb)}>{commission_income_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(commission_income_tb)}>{commission_income_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='YJSR'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingYJSR==null?'block':'none')}} id="chart-yjsr">
									{chartYJSR}
								</span>
								{loadingYJSR}
							</div>
							{summaryYJSR}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingYJSR}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.commission_income_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>		
		)


		// 佣金费率
		var commission_rate_t0 = numFixed(_.get(ds_trade_t0, 'commission_rate', null)*10000, 2);
		commission_rate_t0 = (commission_rate_t0==0? '--': commission_rate_t0);
		var commission_rate_t1 = numFixed(_.get(ds_trade_t1, 'commission_rate', null)*10000, 2);
		commission_rate_t1 = (commission_rate_t1==0? '': commission_rate_t1);
		var commission_rate_hb = _.get(ds_trade_t1_hb, 'commission_rate', null);
		commission_rate_hb = numFixed(commission_rate_hb==null?'': commission_rate_hb*100, 2);
		var commission_rate_tb = _.get(ds_trade_t1_tb, 'commission_rate', null);
		commission_rate_tb = numFixed(commission_rate_tb==null?'': commission_rate_tb*100, 2);

		// 佣金费率图形		
		var loadingYJFL = null, chartYJFL = null;
		if(this.state.displayBlock == 'YJFL'){
			var comr_volumes = ds_comr_volumes.map(function(val){
				return {
					ex_date: val.ex_date.toString(), 
					data: [{value: val.value*10000/val.total, label: '费率'}]
				}
			});
			// var configYJFL = this.getAreaChartConfig(comr_volumes);
			// configYJFL.dataSource.chart.xAxisName = "费率(‱)";
			// configYJFL.dataSource.chart.yAxisName = "";
			// configYJFL.dataSource.chart.numberPrefix = "";
			// configYJFL.dataSource.chart.paletteColors = "#F68C1F";
			var configYJFL = this.getHArea2DConfig(comr_volumes, {unit: '‱'});
			configYJFL.chart.height = 190;
			if(!this.state.disableChart){
				chartYJFL = this.getHighChart(configYJFL)
			}

			var loadingYJFL = loadingCheckChart1(status, 'ds_comr_volumes');

			// this.addChart('chart-yjfl', configYJFL);
			// var jsonConfigYJFL = encodeURIComponent(JSON.stringify(configYJFL));
			// chartYJFL = (<iframe src={"./chart.html?data="+jsonConfigYJFL} height={parseInt(configYJFL.height) + 4} width="100%" style={{border:"none", backgroundColor: configYJFL.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartYJFL = loadingCheckChart(status, 'ds_comr_volumes', chartYJFL);
		}
		
		var blockYJFL = (
			<tr className={"yjfl " + (commission_rate_hb>0? 'up' : 'down')}  data-target="YJFL" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>佣金费率</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'yjfl' + commission_rate_t0} className={"value"}>{commission_rate_t0}</span>
								</ReactCSSTransitionGroup>
								<small className="percentage-10000"></small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{commission_rate_t1}</span><small className="percentage-10000"></small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(commission_rate_hb)}>{commission_rate_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(commission_rate_tb)}>{commission_rate_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='YJFL'?"block": 'none'}}>
						<div className="mid_info mid_line">
							<div className="all_chart">
								<span style={{width: '100%', display: (loadingYJFL==null?'block':'none')}} id="chart-yjfl">
									{chartYJFL}
								</span>
								{loadingYJFL}
							</div>
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingYJFL}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.commission_rate_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>		
		)
	
		// 市场份额	
		var portion_volume_t0 = _.get(ds_trade_t0, 'portion_volume', null);
		if (portion_volume_t0 == null) {
			portion_volume_t0 = '--';
		} else {
			var portion_total_t0 = _.get(ds_trade_t0, 'portion_total', null);
			portion_volume_t0 = portion_total == null ? '--' : numFixed(portion_volume_t0 * 100/ (portion_total_t0 * 2), 2);
		}
		var portion_volume_t1 = numFixed(_.get(ds_trade_t1, 'portion_volume', null)*50, 2); // 市场份额 额外除以2
		portion_volume_t1 = (portion_volume_t1==0? '': portion_volume_t1);

		var portion_volume_hb = _.get(ds_trade_t1_hb, 'portion_volume', null);
		portion_volume_hb = numFixed(portion_volume_hb==null?'' : portion_volume_hb*100, 2);
		var portion_volume_tb = _.get(ds_trade_t1_tb, 'portion_volume', null);
		portion_volume_tb = numFixed((portion_volume_tb==null?'' : portion_volume_tb*100), 2);

		var chartSCFE = null, loadingSCFE = null;
		if(this.state.displayBlock == 'SCFE'){
			var ds_portion = this.formatData(ds_portion_volumes);
			// var configSCFE = this.getAreaChartConfig(ds_portion.map(function(val){
			// 	var volume = null, sum = null;
			// 	val['ex_date'] = val['ex_date'] == null ? [] : val['ex_date'];
			// 	val['data'] = val['data'] == null ? [] : val['data'];
			// 	for (var i = 0; i < val['data'].length; i++) {
			// 		var item = val['data'][i];
			// 		if (item['label'] == '交易量') {
			// 			volume = item['value'];
			// 		} else if (item['label'] == '市场总量') {
			// 			sum = item['value'];
			// 		}
			// 	}
			// 	var zb = (volume == null || sum == null) ? '' : numFixed(volume*100/(sum*2), 2);
			// 	return {label: val.ex_date.toString(), value: zb}
			// }));
			// configSCFE.dataSource.chart.xAxisName = "份额(%)";
			// configSCFE.dataSource.chart.yAxisName = "";
			// configSCFE.dataSource.chart.numberPrefix = "";
			// configSCFE.dataSource.chart.paletteColors = "#F68C1F";
			// configSCFE.dataSource.chart.bgcolor = "#FDF5E8";
			// configSCFE.dataSource.chart.canvasBgColor = "#FDF5E8";
			// configSCFE.dataSource.chart.bgAlpha = "100";
			ds_portion = ds_portion.map(function(val){
				var volume = null, sum = null;
				val['ex_date'] = val['ex_date'] == null ? [] : val['ex_date'];
				val['data'] = val['data'] == null ? [] : val['data'];
				for (var i = 0; i < val['data'].length; i++) {
					var item = val['data'][i];
					if (item['label'] == '交易量') {
						volume = item['value'];
					} else if (item['label'] == '市场总量') {
						sum = item['value'];
					}
				}
				var zb = 0;
				if((volume == null || sum == null) == false){
					zb = (volume*100/(sum*2));
				}

				return {
					ex_date: val.ex_date.toString(), 
					data: [{value: zb, label: '份额'}]
				}
			})
			var configPortion = this.getHArea2DConfig(ds_portion, {unit: '%'});
			configPortion.chart.height = 190;
			configPortion.chart.backgroundColor = "#FDF5E8";
			if(!this.state.disableChart){
				chartSCFE = this.getHighChart(configPortion)
			}
			loadingSCFE = loadingCheckChart1(status, 'ds_portion_volumes');
			// this.addChart('chart-scfe', configSCFE);

//			var jsonconfigSCFE = encodeURIComponent(JSON.stringify(configSCFE));
//			chartSCFE = (<iframe src={"./chart.html?data="+jsonconfigSCFE} height={parseInt(configSCFE.height) + 4} width="100%" style={{border:"none", backgroundColor: configSCFE.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//			chartSCFE = loadingCheckChart(status, 'ds_portion_volumes', chartSCFE);
		} 

		var blockSCFE = (
			<tr className={"SCFE " + (portion_volume_hb>0? 'up' : 'down')}  data-target="SCFE" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>市场份额</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'scfe' + portion_volume_t0} className={"value"}>{portion_volume_t0}</span>
								</ReactCSSTransitionGroup>
								<small>%</small>
							</p>
							<p className="next_value"><span className="type">T+1</span>
								<span className="value">{portion_volume_t1}</span>
								<small>%</small>
							</p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(portion_volume_hb)}>{portion_volume_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(portion_volume_tb)}>{portion_volume_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='SCFE'?"block": 'none'}}>
						<div className="mid_info mid_line">
							<div className="all_chart"><span style={{width: '100%', display: (loadingSCFE==null?'block': 'none')}} id="chart-scfe">
								{chartSCFE}
							</span>
								{loadingSCFE}</div>
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingSCFE}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.portion_volume_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>	
		)

		// 保证金数
		var cash_deposit_t0 = unitFormat(_.get(ds_trade_t0, 'cash_deposit', null));
		cash_deposit_t0[0] = cash_deposit_t0[0] == null ? '--' : cash_deposit_t0[0];
		var cash_deposit_t1 = unitFormat(_.get(ds_trade_t1, 'cash_deposit', null));
		var cash_deposit_hb = _.get(ds_trade_t1_hb, 'cash_deposit', null);
		cash_deposit_hb = numFixed(cash_deposit_hb==null?'': cash_deposit_hb*100, 2);
		var cash_deposit_tb = _.get(ds_trade_t1_tb, 'cash_deposit', null);
		cash_deposit_tb = numFixed(cash_deposit_tb==null?'': cash_deposit_tb*100, 2);

		var chartBZJS = null, summaryBZJS = null, chartBZJS=null;
		if(this.state.displayBlock == 'BZJS'){
			// var configBZJS = this.getPieChartConfig(ds_cash_volumes);
			var configBZJS = this.getHPie2DConfig(ds_cash_volumes, {
				height: (screen.width-64)*0.45 - 10,
			})
			if(!this.state.disableChart){
				chartBZJS = this.getHighChart(configBZJS);
			}
			var loadingBZJS = loadingCheckChart1(status, 'ds_cash_volumes');

//			var jsonConfigBZJS = encodeURIComponent(JSON.stringify(configBZJS));
//			chartBZJS = (<iframe src={"./chart.html?data="+jsonConfigBZJS} height={parseInt(configBZJS.height) + 4} width="100%" style={{border:"none"}} allowTransparency="true"></iframe>);
//			chartBZJS = loadingCheckChart(status, 'ds_cash_volumes', chartBZJS);
			summaryBZJS = zbCal(ds_cash_volumes, {colors: colors, type: 2});
		} 

		var blockBZJS = (
			<tr className={"bzjs " + (cash_deposit_hb>0? 'up' : 'down')}  data-target="BZJS" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>保证金数</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'bzjs' + cash_deposit_t0[0]} className={"value"}>{numFixed(cash_deposit_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{cash_deposit_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(cash_deposit_t1[0],0)}</span><small>{cash_deposit_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(cash_deposit_hb)}>{cash_deposit_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(cash_deposit_tb)}>{cash_deposit_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='BZJS'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingBZJS==null?'block': 'none')}} id="chart-bzjs">
								{chartBZJS}
								</span>
								{loadingBZJS}
							</div>
							{summaryBZJS}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingBZJS}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.cash_deposit_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>	
		)

		// 交易客户数
		var trade_customer_t0 = unitFormat(_.get(ds_trade_t0, 'trade_customer', null));
		trade_customer_t0[0] = trade_customer_t0[0] == null ? '--' : trade_customer_t0[0];
		var trade_customer_t1 = unitFormat(_.get(ds_trade_t1, 'trade_customer', null));
		var trade_customer_hb = _.get(ds_trade_t1_hb, 'trade_customer', null);
		trade_customer_hb = numFixed(trade_customer_hb==null?'': trade_customer_hb*100, 2);
		var trade_customer_tb = _.get(ds_trade_t1_tb, 'trade_customer', null);
		trade_customer_tb = numFixed(trade_customer_tb==null?'': trade_customer_tb*100, 2);

		var chartYJKHS =null, summaryJYKHS = null, loadingYJKHS = null;
		if(this.state.displayBlock == 'JYKHS'){
			var valJykhs = 0;
			var data = [];
			for(var i=0; i<ds_tradecust_volumes.length; i++){
				var item = ds_tradecust_volumes[i];
				if(item.label == '交易客户数'){
					valJykhs = item.value;
					data.push(item);
				}
				else{
					item = $.extend(true, {}, item);
					item.value = item.value - valJykhs;
					item.label = '无交易客户数'
					data.push(item);
				}
			}
			// var configYJKHS = this.getPieChartConfig(ds_tradecust_volumes);
			// var configYJKHS = this.getPieChartConfig(data, '#FDF5E8');
			var configYJKHS = this.getHPie2DConfig(data, {
				height: (screen.width-64)*0.45 - 10,
				backgroundColor: '#FDF5E8'
			})
			if(!this.state.disableChart){
				chartYJKHS = this.getHighChart(configYJKHS);
			}

			var loadingYJKHS = loadingCheckChart1(status, 'ds_tradecust_volumes');

//			var jsonConfigYJKHS = encodeURIComponent(JSON.stringify(configYJKHS));
//			chartYJKHS = (<iframe src={"./chart.html?data="+jsonConfigYJKHS} height={parseInt(configYJKHS.height) + 4} width="100%" style={{border:"none"}} allowTransparency="true"></iframe>);
//			chartYJKHS = loadingCheckChart(status, 'ds_tradecust_volumes', chartYJKHS);
			summaryJYKHS = zbCal(ds_tradecust_volumes, {colors: colors, type: 2, noRatio: ['总客户数'], unit: '', unitBu: '户', sum: ['总客户数']});
		} 

		var blockJYKHS = (
			<tr className={"jykhs " + (trade_customer_hb>0? 'up' : 'down')}  data-target="JYKHS" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>交易客户数</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'jykhs' + trade_customer_t0[0]} className={"value"}>{numFixed(trade_customer_t0[0],2)}</span>
								</ReactCSSTransitionGroup>
							<small>{trade_customer_t0[1]}户</small></p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(trade_customer_t1[0],2)}</span><small>{trade_customer_t1[1]}户</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(trade_customer_hb)}>{trade_customer_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(trade_customer_tb)}>{trade_customer_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='JYKHS'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingYJKHS==null?'block': 'none')}} id="chart-jykhs">
								{chartYJKHS}
								</span>
								{loadingYJKHS}
							</div>
							{summaryJYKHS}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingJYKHS}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.trade_customer_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>	
		)

		// 两融资金池
		var two_financial_fund_t0 = unitFormat(_.get(ds_trade_t0, 'two_financial_fund', null));
		two_financial_fund_t0[0] = two_financial_fund_t0[0] == null ? '--' : two_financial_fund_t0[0];
		var two_financial_fund_t1 = unitFormat(_.get(ds_trade_t1, 'two_financial_fund', null));
		var two_financial_fund_hb = _.get(ds_trade_t1_hb, 'two_financial_fund', null);
		two_financial_fund_hb = numFixed(two_financial_fund_hb==null?'': two_financial_fund_hb*100, 2);
		var two_financial_fund_tb = _.get(ds_trade_t1_tb, 'two_financial_fund', null);
		two_financial_fund_tb = numFixed(two_financial_fund_tb==null?'': two_financial_fund_tb*100, 2);

		var loadingLRZJC = null, summaryLRZJC = null, chartLRZJC = null;
		if(this.state.displayBlock == 'LRZJC'){
			// var configLRZJC = this.getPieChartConfig(ds_twof_volumes);
			var configLRZJC = this.getHPie2DConfig(ds_twof_volumes, {
				height: (screen.width-64)*0.45 - 10,
			})
			if(!this.state.disableChart){
				chartLRZJC = this.getHighChart(configLRZJC);
			}
			loadingLRZJC = loadingCheckChart1(status, 'ds_twof_volumes');

			// var jsonConfigLRZJC = encodeURIComponent(JSON.stringify(configLRZJC));
			// chartLRZJC = (<iframe src={"./chart.html?data="+jsonConfigLRZJC} height={parseInt(configLRZJC.height) + 4} width="100%" style={{border:"none"}} allowTransparency="true"></iframe>);
			// chartLRZJC = loadingCheckChart(status, 'ds_twof_volumes', chartLRZJC);
			summaryLRZJC = zbCal(ds_twof_volumes, {colors: colors, type: 2});
		}

		var blockLRZJC = (
			<tr className={"lrzjc " + (two_financial_fund_hb>0? 'up' : 'down')}  data-target="LRZJC" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>两融资金池</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'lrzjc' + two_financial_fund_t0[0]} className={"value"}>{numFixed(two_financial_fund_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
							<small>{two_financial_fund_t0[1]}元</small></p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(two_financial_fund_t1[0],0)}</span>
							<small>{two_financial_fund_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(two_financial_fund_hb)}>{two_financial_fund_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(two_financial_fund_tb)}>{two_financial_fund_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='LRZJC'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span id="chart-lrzjc" style={{width:'100%', display:(loadingLRZJC==null?'block':'none')}}>
									{chartLRZJC}
								</span>
								{loadingLRZJC}
							</div>
							{summaryLRZJC}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingLRZJC}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.two_financial_fund_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>	
		)

		// 约定购回
		var agreed_repurchase_t0 = unitFormat(_.get(ds_trade_t0, 'repurchase_volume', null));
		agreed_repurchase_t0[0] = agreed_repurchase_t0[0] == null ? '--' : agreed_repurchase_t0[0];
		var agreed_repurchase_t1 = unitFormat(_.get(ds_trade_t1, 'repurchase_volume', null));
		var agreed_repurchase_hb = _.get(ds_trade_t1_hb, 'repurchase_volume', null);
		agreed_repurchase_hb = numFixed(agreed_repurchase_hb==null?'': agreed_repurchase_hb*100, 2);
		var agreed_repurchase_tb = _.get(ds_trade_t1_tb, 'repurchase_volume', null);
		agreed_repurchase_tb = numFixed(agreed_repurchase_tb==null?'': agreed_repurchase_tb*100, 2);
		var blockYDGH = (
			<tr className={"ydgh " + (agreed_repurchase_hb>0? 'up' : 'down')}  data-target="YDGH" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>约定购回</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'ydgh' + agreed_repurchase_t0[0]} className={"value"}>{numFixed(agreed_repurchase_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{agreed_repurchase_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(agreed_repurchase_t1[0],0)}</span>
							<small>{agreed_repurchase_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(agreed_repurchase_hb)}>{agreed_repurchase_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(agreed_repurchase_tb)}>{agreed_repurchase_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='YDGH'?"block": 'none'}}>
						<div className="mid_info">
							{zbCal(ds_repurchase_volumes, {className: 'info all_info', colors: colors, type: 2})}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingYDGH}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.repurchase_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)
		
		// 股票质押
		var stock_pledge_t0 = unitFormat(_.get(ds_trade_t0, 'stock_pledge', null));
		stock_pledge_t0[0] = stock_pledge_t0[0] == null ? '--' : stock_pledge_t0[0];
		var stock_pledge_t1 = unitFormat(_.get(ds_trade_t1, 'stock_pledge', null));
		var stock_pledge_hb = _.get(ds_trade_t1_hb, 'stock_pledge', null);
		stock_pledge_hb = numFixed(stock_pledge_hb==null?'': stock_pledge_hb*100, 2);
		var stock_pledge_tb = _.get(ds_trade_t1_tb, 'stock_pledge', null);
		stock_pledge_tb = numFixed(stock_pledge_tb==null?'': stock_pledge_tb*100, 2);
		var blockGPZY = (
			<tr className={"gpzy " + (stock_pledge_hb>0? 'up' : 'down')}  data-target="GPZY" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>股票质押</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'gpzy' + stock_pledge_t0[0]} className={"value"}>{numFixed(stock_pledge_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{stock_pledge_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(stock_pledge_t1[0],0)}</span>
							<small>{stock_pledge_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(stock_pledge_hb)}>{stock_pledge_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(stock_pledge_tb)}>{stock_pledge_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='GPZY'?"block": 'none'}}>
						<div className="mid_info">
							{zbCal(ds_pledge_volumes, {className: 'info all_info', colors: colors, type: 2})}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingGPZY}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.stock_pledge_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>		
		)

		// 融资盘数据
		var board_volume_t0 = unitFormat(_.get(ds_trade_t0, 'board_volume', null));
		board_volume_t0[0] = board_volume_t0[0] == null ? '--' : board_volume_t0[0];
		var board_volume_t1 = unitFormat(_.get(ds_trade_t1, 'board_volume', null));
		var board_volume_hb = _.get(ds_trade_t1_hb, 'board_volume', null);
		board_volume_hb = numFixed(board_volume_hb==null?'': board_volume_hb*100, 2);
		var board_volume_tb = _.get(ds_trade_t1_tb, 'board_volume', null);
		board_volume_tb = numFixed(board_volume_tb==null?'': board_volume_tb*100, 2);	

		var boardList = null ;
		if(this.state.displayBlock == 'RZPSJ'){
			var trs = [];
			var tds = [];
			ds_board_volumes.map(function(item){
				if(tds.length == 4){
					trs.push(
						<tr key={'tr-' + trs.length}>{tds}</tr>
					)
					tds = [];
				}
				tds.push(<td key={item.label} className="title" style={{background:'#FDF5E8'}}>{item.label}</td>);
				var value = unitFormat(item.value, '万');
				tds.push(<td key={item.label+'title'} style={{background:'#FDF5E8'}}>{numFixed(value[0], 0)+value[1]+'元'}</td>);
			})
			if(tds.length > 0){
				trs.push(
					<tr>{tds}</tr>
				)
			}
			boardList = trs;
		}
		
		var blockRZPSJ = (
			<tr className={"rzpsj " + (board_volume_hb>0? 'up' : 'down')}  data-target="RZPSJ" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>融资盘数据</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'rzpsj' + board_volume_t0[0]} className={"value"}>{numFixed(board_volume_t0[0],4)}</span>
								</ReactCSSTransitionGroup>
								<small>{board_volume_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(board_volume_t1[0],4)}</span>
							<small>{board_volume_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(board_volume_hb)}>{board_volume_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(board_volume_tb)}>{board_volume_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='RZPSJ'?"block": 'none'}}>
						<div className="mid_info">
							<table className="info_table">
								<tbody>{boardList}</tbody>
							</table>
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingRZPSJ}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.board_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)

		// 持仓市值
		var position_value_t0 = unitFormat(_.get(ds_trade_t0, 'position_value', null));
		position_value_t0[0] = position_value_t0[0] == null ? '--' : position_value_t0[0];
		var position_value_t1 = unitFormat(_.get(ds_trade_t1, 'position_value', null));
		var position_value_hb = _.get(ds_trade_t1_hb, 'position_value', null);
		position_value_hb = numFixed(position_value_hb==null?'': position_value_hb*100, 2);
		var position_value_tb = _.get(ds_trade_t1_tb, 'position_value', null);
		position_value_tb = numFixed(position_value_tb==null?'': position_value_tb*100, 2);

		var loadingCCSZ = null, summaryCCSZ = null, chartCCSZ = null;
		if(this.state.displayBlock == 'CCSZ'){
			// var configCCSZ = this.getPieChartConfig(ds_position_volumes);
			var configCCSZ = this.getHPie2DConfig(ds_position_volumes, {
				height: (screen.width-64)*0.45 - 10,
			})
			if(!this.state.disableChart){
				chartCCSZ = this.getHighChart(configCCSZ);
			}
			loadingCCSZ = loadingCheckChart1(status, 'ds_position_volumes');

			// this.addChart('chart-ccsz', configCCSZ);

			// var jsonConfigCCSZ = encodeURIComponent(JSON.stringify(configCCSZ));
			// chartCCSZ = (<iframe src={"./chart.html?data="+jsonConfigCCSZ} height={parseInt(configCCSZ.height) + 4} width="100%" style={{border:"none"}} allowTransparency="true"></iframe>);
			// chartCCSZ = loadingCheckChart(status, 'ds_position_volumes', chartCCSZ);
			summaryCCSZ = zbCal(ds_position_volumes, {colors: colors, type: 2});
		} 		

		var blockCCSZ = (
			<tr className={"ccsz " + (position_value_hb>0? 'up' : 'down')}  data-target="CCSZ" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>持仓市值</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'ccsz' + position_value_t0[0]} className={"value"}>{numFixed(position_value_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{position_value_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(position_value_t1[0],0)}</span>
							<small>{position_value_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(position_value_hb)}>{position_value_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(position_value_tb)}>{position_value_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main"  style={{display: this.state.displayBlock=='CCSZ'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span id="chart-ccsz" style={{width: '100%', display: (loadingCCSZ==null?'block': 'none')}}>
									{chartCCSZ}
								</span>
								{loadingCCSZ}
							</div>

							{summaryCCSZ}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoTradingCCSZ}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_trade_t0.position_value_date)).substr(0,16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)

		// 顶部环比交易量
		var trade_volume_diff = _.get(ds_trade_t1, 'trade_volume', null) - _.get(ds_trade_t1_hb_cvalue, 'trade_volume', null);
		trade_volume_diff = (trade_volume_diff == null ? ['', '']: unitFormat(trade_volume_diff, '亿'))[0];
		
		// pulldown
		// pullDownIcon={true} marginTop={this.state.pullDownMargin} pullDownHeight={50} pullDownCallback={this.pullDownCallback}>

		return (
	<div key="page-trading" id="container" className="container">
		<header id="header">
			<span className="back_btn" onTouchTap={this.goBackIndex}><i className="icon-angle-left"></i></span>
			<span className="header_title"><span>交易数据</span></span>
		</header>
      <IScroll pullDownIcon onRefresh={this.updateData}>
		<div id="page_main">
			<div className="list_topMain">
				<div className="sort_main">
					<div className="sort_type">
                     <span onTouchTap={this.handleDateTypeChoose} data-target="DAY" className={"first " + (this.state.dimdate=='DAY'?'now': '')}>日</span>
	                <span style={{marginLeft: '-1px'}} onTouchTap={this.handleDateTypeChoose} data-target="MONTH" className={"" + (this.state.dimdate=='MONTH'?'now': '')}>月</span>
	                <span onTouchTap={this.handleDateTypeChoose} data-target="YEAR" className={"second " + (this.state.dimdate=='YEAR'?'now': '')}>年</span>
	          
		            </div>
				</div>
				<div className="first_main">
					<div className="title">成交量</div>
					<div className="value_main">
						<span className="value">{numFixed(trade_volume_t1[0],0)}</span><small>{trade_volume_t1[1]}元</small>
					</div>
					<div className="change_main">
						<span className="change">{(trade_volume_diff==0?'':numFixed(trade_volume_diff, 0)) + '亿元'}</span>
						<span className={"chg " + (trade_volume_hb > 0? 'up_color' : 'down_color')}>{trade_volume_hb+'%'}</span>
					</div>
				</div>
			</div>
			<div className="table_list_model">
				<table className="slide">
					<tbody>
					{blockAUM}	
					{blockCJL}	
					{blockYJSR}
					{blockYJFL}
					{blockSCFE}
					{blockBZJS}	
					{blockJYKHS}	
					{blockLRZJC}	
					{blockYDGH}	
					{blockGPZY}	
					{blockRZPSJ}	
					{blockCCSZ}	
				</tbody></table>
			</div>
		</div>
		</IScroll>
	</div>
		);
	}	
});


export { PageTrading };